
<script setup>
import useForm from '@/hooks/use-form'
import { onMounted, reactive } from 'vue'
import {
  validate200Words,
  validate20WordsRequired,
  validate50WordsRequired
} from '@/utils/form-validate'
import { savePlaygroundMockApi, getPlaygroundByIdMockApi } from '@/api/mock-js/playground-api'

defineOptions({
  name: 'FormTest'
})
onMounted(async () => {
  await getFormDataById?.(getPlaygroundByIdMockApi)
})
const formData = reactive({
  id: undefined,
  content: '',
  subTitle: '',
  title: '',
  poster: '',
  fileList: [],
  createTime: '',
  remarks: ''
})

const rules = {
  title: {required: true, validator: validate20WordsRequired, trigger: 'blur'},
  subTitle: {required: true, validator: validate50WordsRequired, trigger: 'blur'},
  content: {required: true, validator: validate200Words, trigger: 'blur'},
  remarks: {trigger: 'blur', validator: validate200Words}
}
// 表单 hooks
const {
  formRef,
  loadData,
  saveForm,
  back,
  isRead,
  editFlag,
  getFormDataById
} = useForm(formData)

</script>
<template>
  <CommonForm
      class="test-form"
      title="测试表单"
      :edit-flag="editFlag"
      :loading="loadData.loading"
      @on-save="saveForm(savePlaygroundMockApi,'测试数据')"
      @on-back="back">
    <ElForm ref="formRef" :model="formData" v-loading="loadData.loading" :rules="rules" label-width="80px" size="large">
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="标题" prop="title">
            <ElInput v-model.trim="formData.title" :disabled="isRead" placeholder="请输入标题"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="副标题" prop="subTitle">
            <ElInput v-model.trim="formData.subTitle" :disabled="isRead" placeholder="请输入副标题"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="封面" prop="poster" style="height: 148px;">
            <UploadSingleImg v-model="formData.poster"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="附件" prop="fileList">
            <UploadFile v-model="formData.fileList"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="内容" prop="content">
            <ElInput type="textarea" row="3" v-model.trim="formData.content" :disabled="isRead"
                     placeholder="请输入内容"/>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElFormItem label="备注" prop="remarks">
        <ElInput type="textarea" rows="3" :disabled="isRead" v-model="formData.remarks"/>
      </ElFormItem>
    </ElForm>
  </CommonForm>
</template>
